<template>
  <div id="order">
    <!-- 顶部搜索 -->
    <van-nav-bar fixed class="top-nav">
      <!-- 返回按钮与搜索框 -->
      <template #left>
        <van-icon name="arrow-left"></van-icon>
        <van-search
          class="top-search"
          v-model="value"
          shape="round"
          placeholder="搜索订单"
        />
      </template>

      <!-- 省略图标 -->
      <template #right>
        <van-icon name="weapp-nav" />
      </template>
    </van-nav-bar>
    <!-- 顶部导航栏 -->
    <van-tabs class="diy-content" v-model="active" swipeable animated>
      <!-- 遍历订单分类 -->
      <van-tab v-for="index in 5" :key="index" :title="'选项 ' + index">
        <div v-for="i in 5" :key="i">
          <van-nav-bar class="orderCard-title">
            <template #left>
              <img src="../assets/logo.png" alt="" class="shop-logo" />
              <p>店铺名称{{}}</p>
              <van-icon name="arrow" class="shop-in" />
            </template>
            <template #right><p>订单状态{{}}</p></template>
          </van-nav-bar>
          <van-card
            class="diy-card"
            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          >
            <template #title>
              <router-link to="/">
                <div>
                  <span
                    >商品标题商品标题商品标题商品标题商品标题商品标题商品标题{{}}</span
                  >
                  <span>商品单价{{}}</span>
                </div>
              </router-link>
            </template>
            <template #desc>
              <router-link to="/">
                <div>
                  <span>描述信息{{}}</span>
                  <span>购买数量{{}}</span>
                </div>
              </router-link>
            </template>
            <template #tags>
              <van-tag plain type="danger">优惠政策{{}}</van-tag>
            </template>
            <template #price>
              <div>
                <span>总价{{}},优惠--</span>
                <span>实付款{{}}</span>
              </div>
            </template>
            <template #footer>
              <router-link to="/">
                <van-button size="mini">加入购物车</van-button>
              </router-link>
              <router-link to="/">
                <van-button size="mini">查看物流</van-button>
              </router-link>
              <router-link to="/">
                <van-button size="mini">评价</van-button>
              </router-link>
            </template>
          </van-card>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      active: 0,
    }
  },
  methods: {
    onClickLeft() {
      Toast("返回")
    },
    onClickRight() {
      Toast("按钮")
    },
  },
}
</script>

<style lang="scss" scoped>
.top-nav {
  z-index: 3;
  > div > div > i {
    margin: 0 0.5rem;
  }
  .top-search {
    padding: 0;
    & > div {
      // 设置圆角搜索框的背景颜色
      background-color: rgb(240, 240, 240);
    }
  }
}
.top-search {
  width: 18rem;
}
.diy-content {
  margin-top: 2.613333rem;
  background-color: rgb(240, 240, 240);
  .orderCard-title {
    // border: 1px solid black;
    border-bottom: 0;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    margin: 0 0.6rem;
    .shop-logo {
      width: 0.9rem;
      height: 0.9rem;
      margin-left: 0.6rem;
    }
    .shop-in {
      color: #aaaaaa;
    }
    p {
      margin: 0;
    }
    & > div {
      & > div:first-child {
        p {
          margin-left: 0.3rem;
          font-weight: 600;
          color: #111111;
        }
      }
      & > div:last-child {
        p {
          color: orangered;
        }
      }
    }
  }
  .diy-card {
    // border: 1px solid black;
    border-top: 0;
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    margin: 0 0.6rem 0.6rem 0.6rem;
    // box-shadow: 0 2px 0 0 gray;
    .van-card__content {
      > div:first-child {
        padding-top: 0.333rem;
        text-align: left;
        > div,
        > span {
          margin-top: 0.444rem;
        }

        // 商品标题+商品单价行
        > a:nth-child(1) > div {
          font-weight: 600;
          color: #111111;
          display: flex;
          justify-content: space-between;
          > span:first-child {
            display: block;
            width: 9.666rem;
            // 设置单行溢出,用省略号代替
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        // 描述信息+购买数量行
        > a:nth-child(2) > div {
          color: #888888;
          display: flex;
          justify-content: space-between;
          margin-top: 0.333rem;
        }
        > span {
          line-height: 1rem;
          transform: scale(0.8);
          margin-left: -0.4rem;
          color: orangered;
        }
      }

      > div {
        height: 1.666rem;
        text-align: right;
        > div > div > span {
          line-height: 1.666rem;
          &:first-child {
            color: #888888;
          }
          &:nth-child(2) {
            margin-left: 0.333rem;
            color: #111111;
          }
        }
      }
    }
    .van-card__footer {
      > a > button:nth-child(1) {
        border: 1px solid #cccccc;
        border-radius: 1rem;
        width: 5rem;
        height: 2rem;
        font-weight: 600;
      }
      > a > button:nth-child(2) {
        border: 1px solid #cccccc;
        border-radius: 1rem;
        width: 5rem;
        height: 2rem;
        font-weight: 600;
      }
      > a > button:nth-child(3) {
        border: 1px solid rgba(255, 68, 0, 0.5);
        border-radius: 1rem;
        width: 5rem;
        height: 2rem;
        font-weight: 600;
        color: orangered;
      }
    }
  }
}
</style>
